<template>
  <el-dialog
      v-model="open"
      :close-on-click-modal="false"
      title="新增"
      width="680"
      draggable append-to-body destroy-on-close>
    <el-form ref="formDataRef" size="default" :model="formData" :rules="formRules" label-width="100">
      <el-form-item label="名称" prop="name">
        <el-input v-model="formData.name" show-word-limit maxlength="20" placeholder="请输入" style="width: 500px"/>
      </el-form-item>
      <el-form-item label="类型" prop="type">
      </el-form-item>
      <el-form-item label="标识" prop="sign">
        <el-input v-model="formData.sign" placeholder="请输入" style="width: 500px"/>
      </el-form-item>

      <el-form-item label="经度" prop="longitude">
        <el-input-number v-model="formData.longitude" max="180" placeholder="请输入" style="width: 500px"/>
      </el-form-item>
      <el-form-item label="纬度" prop="latitude">
        <el-input-number v-model="formData.latitude" max="90" placeholder="请输入" style="width: 500px"/>
      </el-form-item>
      <el-form-item label="高程" prop="elevation">
        <el-input v-model="formData.elevation" placeholder="请输入" style="width: 500px"/>
      </el-form-item>

      <el-form-item label="区域" prop="zone">
        <el-select v-model="formData.zone" placeholder="请选择" style="width: 500px">
          <el-option label="区域1" value="区域1"/>
          <el-option label="区域2" value="区域2"/>
        </el-select>
      </el-form-item>
      <el-form-item label="单位" prop="org">
        <el-select v-model="formData.org" placeholder="请选择" style="width: 500px">
          <el-option label="单位1" value="单位1"/>
          <el-option label="单位2" value="单位2"/>
        </el-select>
      </el-form-item>

      <el-form-item label="图标/图片" prop="is_pic">
        <el-radio-group v-model="formData.is_pic">
          <el-radio :value="1">图标</el-radio>
          <el-radio :value="2">图片</el-radio>
        </el-radio-group>
      </el-form-item>

      <el-form-item prop="pic" v-if="formData.is_pic==2">
        <el-upload
            :on-success="uploadSuccess"
            v-model:file-list="formData.pic"
            :action="option.action"
            list-type="picture-card"
            :on-preview="handlePictureCardPreview"
            :on-remove="handleRemove">
          <el-icon>
            <Plus/>
          </el-icon>
        </el-upload>
      </el-form-item>

      <el-form-item label="图标尺寸" prop="size" v-if="formData.is_pic==1">
        <el-input v-model="formData.size" placeholder="请输入" style="width: 500px"/>
      </el-form-item>
      <el-form-item label="图标形状" prop="shape" v-if="formData.is_pic==1">
        <el-input v-model="formData.shape" placeholder="请输入" style="width: 500px"/>
      </el-form-item>
      <el-form-item label="图标颜色" prop="color" v-if="formData.is_pic==1">
        <el-input v-model="formData.color" placeholder="请输入" style="width: 500px"/>
      </el-form-item>
      <el-form-item label="标注内容" prop="label" v-if="formData.is_pic==1">
        <el-input v-model="formData.label" placeholder="请输入" style="width: 500px"/>
      </el-form-item>

      <el-form-item label="初始化状态" prop="is_view">
        <el-select v-model="formData.is_view" placeholder="请选择" style="width: 500px">
          <el-option label="显示" :value="1"/>
          <el-option label="隐藏" :value="0"/>
        </el-select>
      </el-form-item>

    </el-form>

    <template #footer>
      <el-button @click="()=>{open=false}">取 消</el-button>
      <el-button type="primary" @click="submit">保 存</el-button>
    </template>

    <el-dialog v-model="dialogVisible">
      <img w-full :src="dialogImageUrl" alt="Preview Image"/>
    </el-dialog>

  </el-dialog>
</template>

<script setup>
//open 特殊处理双向绑定
import {apiPointEdit} from "@/api/index.js";
import $modal from "@/util/element/modal.js";
import {copyObj} from "@/util/kit.js";
import {formRules} from "@/view/gis/point/option.js";

const open = defineModel("open", {default: false})

const dialogImageUrl = ref('')
const dialogVisible = ref(false)

const handleRemove = (uploadFile, uploadFiles) => {
  //// console.log(uploadFile, uploadFiles)
  proxy.$refs["formDataRef"].validateField(["file"], () => {
  })
}

const handlePictureCardPreview = (uploadFile) => {
  dialogImageUrl.value = uploadFile.url
  dialogVisible.value = true
}

function uploadSuccess() {
  //// console.log(formData)
  //// console.log(formData.pic[0].response.data.picpath)
  proxy.$refs["formDataRef"].validateField(["file"], () => {
  })
}

//普通 props
const props = defineProps({
  data: Object,
  dictValue: {
    default: [],
    type: Array
  },
})

//回调通知
const emit = defineEmits(['ok'])

const {proxy} = getCurrentInstance();

let optionKey = {
  loading: false,
  dictCode: 'enuCommonStatus,enuUserMtAuth',
  dictValue: [],
  action: import.meta.env.VITE_UPLOAD_URL + '/api/uploadPic'
}

const formKey = {
  is_pic: 1,
  pic: []
}


let formData = reactive(formKey);
let option = reactive(optionKey);

//页面加载完成回调
onMounted(() => {
  formData = reactive(copyObj(props.data))

  // 处理回显图片
  let fileList = []
  copyObj(formData.pic).filter(item => {
    item.url = import.meta.env.VITE_FILE_URL + "/" + item.path
    fileList.push(item)
  })
  formData.pic = fileList;
})

onUnmounted(() => {
  //// console.log("Dialog onUnmounted")
});


function submit() {
  proxy.$refs["formDataRef"].validate(valid => {
    if (valid) {
      // //// console.log(formData.pic[0])

      //处理图片
      let pic = []
      for (let i = 0; i < formData.pic.length; i++) {
        let data = {}
        let file = formData.pic[i]
        //新数据数据
        if (file.response && file.status === "success") {
          let res = file.response.data
          data.path = res.picpath
        }
        //历史数据
        else {
          data = file
        }
        pic.push(data)
      }
      //
      let param = copyObj(formData)
      param.pic = pic
      apiPointEdit(param).then(res => {
        if (res.code != 200) {
          $modal.error(res.msg);
          return;
        }

        $modal.success();
        emit('ok', {id: 10})
        open.value = false
      })
    }

  });


}
</script>

<style scoped lang="scss">

</style>
